<!--
 * @Author: 107w 8801453+lu-shangru@user.noreply.gitee.com
 * @Date: 2023-06-10 17:34:31
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-04-24 11:43:34
 * @Description:
 *
 * Copyright (c) 2023 by 107w, All Rights Reserved.
-->
<template>
  <!-- 点击菜单想事项 -->
  <el-dropdown trigger="click" @command="changeLanguage">
    <!-- 显示一个图标 -->
    <div style="font-size: 34px; cursor: pointer; margin-right: 10px">
      <!-- <svg-icon icon-class="language" class="lang" /> -->
      <i
        style="font-size: 20px"
        class="iconfont icon-a-zhuti_huaban1 lang_color"
      />
    </div>
    <!-- 下拉图标 -->
    <el-dropdown-menu slot="dropdown">
      <div class="colors_wrap">
        <el-divider
          content-position="center"
        ><span
          style="font-size: 12px; white-space: nowrap"
        >浅色主题</span></el-divider>
        <div
          v-for="item in lightColors"
          :key="item"
          :style="{ 'background-color': item }"
          class="color_item"
          @click="changeLightColor(item)"
        />
        <el-divider
          content-position="center"
        ><span
          style="font-size: 12px; white-space: nowrap"
        >深色主题</span></el-divider>
        <div
          v-for="(item, index) in darkColors"
          :key="item + index"
          :style="{ 'background-color': item }"
          class="color_item"
          @click="changeDarkColor(item)"
        />
      </div>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { mapMutations } from 'vuex'
import Cookie from 'js-cookie'
export default {
  data() {
    return {
      lightColors: ['#fff', '#6e76fa', '#42b882', '#4f7afd', '#992c2b', '#f9755b'],
      darkColors: ['#3e4476', '#6e76fa', '#42b882', '#4f7afd', '#992c2b']
    }
  },
  created() {
    const theme = JSON.parse(localStorage.getItem('theme') || '{}')
    if (!theme.color) return this.changeLightColor('#4f7afd')
    if (theme.isLight) {
      this.changeLightColor(theme.color)
    } else {
      this.changeDarkColor(theme.color)
    }
  },
  methods: {
    ...mapMutations(['setLang']),
    changeLanguage(type) {
      // 设置类型 先写入到 cookie
      Cookie.set('language', type)
      this.setLang(type)
      // 改变当前的语言
      this.$i18n.locale = type // 将当前的多语言类型改成对应的类型
      this.$message.success('切换语言成功')
    },
    // 动态修改浅色色主题
    changeLightColor(color) {
      const theme = {
        color: color,
        isLight: true
      }
      localStorage.setItem('theme', JSON.stringify(theme))
      this.switchThemes(true)
      let themeColors = [
        {
          name: '--logBg',
          color
        },
        {
          name: '--navbarBg',
          color
        },
        {
          name: '--subMenuActiveText',
          color
        },
        {
          name: '--menuActiveText',
          color
        }
      ]
      if (color === '#fff') {
        themeColors = [
          ...themeColors,
          {
            name: '--subMenuActiveText',
            color: '#409eff'
          },
          {
            name: '--menuActiveText',
            color: '#409eff'
          },
          {
            name: '--navbarText',
            color: '#595959'
          }
        ]
      }
      if (color === '#6e76fa') {
        themeColors = [
          ...themeColors,
          {
            name: '--logBg',
            color: '#4f57de'
          }
        ]
      }
      if (color === '#4f7afd') {
        themeColors = [
          ...themeColors,
          {
            name: '--logBg',
            color: '#4f7afd'
          }
        ]
      }
      this.OptimizeData(themeColors)
    },
    // 动态修改深色主题
    changeDarkColor(color) {
      const theme = {
        color: color,
        isLight: false
      }
      localStorage.setItem('theme', JSON.stringify(theme))
      this.switchThemes(false)
      let themeColors = [
        {
          name: '--logBg',
          color
        },
        {
          name: '--navbarBg',
          color
        },
        {
          name: '--subMenuActiveText',
          color
        },
        {
          name: '--menuActiveText',
          color
        }
      ]
      if (color === '#3e4476') {
        themeColors = [
          ...themeColors,
          {
            name: '--logBg',
            color: '#3e4476'
          },
          {
            name: '--menuActiveText',
            color: '#409eff'
          },
          {
            name: '--subMenuActiveText',
            color: '#409eff'
          },
          {
            name: '--menuBg',
            color: '#354052'
          },
          {
            name: '--subMenuBg',
            color: '#354052'
          }
        ]
      }
      if (color === '#6e76fa') {
        themeColors = [
          ...themeColors,
          {
            name: '--logBg',
            color: '#4f57de'
          },
          {
            name: '--menuBg',
            color: '#354052'
          },
          {
            name: '--subMenuBg',
            color: '#354052'
          },
          {
            name: '--subMenuHover',
            color: '#4c5f7b'
          },
          {
            name: '--menuHover',
            color: '#354052'
          }
        ]
      }
      if (color === '#42b882') {
        themeColors = [
          ...themeColors,
          {
            name: '--logBg',
            color: '#3aa271'
          },
          {
            name: '--menuBg',
            color: '#354052'
          },
          {
            name: '--subMenuBg',
            color: '#354052'
          },
          {
            name: '--subMenuHover',
            color: '#4c5f7b'
          },
          {
            name: '--menuHover',
            color: '#354052'
          }
        ]
      }
      if (color === '#992c2b') {
        themeColors = [
          ...themeColors,
          {
            name: '--logBg',
            color: '#832525'
          },
          {
            name: '--menuBg',
            color: '#354052'
          },
          {
            name: '--subMenuBg',
            color: '#354052'
          },
          {
            name: '--subMenuHover',
            color: '#4c5f7b'
          },
          {
            name: '--menuHover',
            color: '#354052'
          }
        ]
      }
      if (color === '#4f7afd') {
        themeColors = [
          ...themeColors,
          {
            name: '--logBg',
            color: '#4f7afd'
          },
          {
            name: '--menuBg',
            color: '#354052'
          },
          {
            name: '--subMenuBg',
            color: '#354052'
          },
          {
            name: '--subMenuHover',
            color: '#4c5f7b'
          },
          {
            name: '--menuHover',
            color: '#354052'
          }
        ]
      }
      this.OptimizeData(themeColors)
    },
    // 切换浅色、深色主题， true => 浅色  false => 深色
    switchThemes(isLight) {
      let themeColors = []
      if (isLight) {
        themeColors = [
          {
            name: '--menuBg',
            color: '#fff'
          },
          {
            name: '--subMenuBg',
            color: '#fff'
          },
          {
            name: '--menuText',
            color: '#595959'
          },
          {
            name: '--subMenuHover',
            color: '#f3f6ff'
          },
          {
            name: '--menuHover',
            color: '#f3f6ff'
          },
          {
            name: '--navbarText',
            color: '#fff'
          }
        ]
      } else {
        themeColors = [
          {
            name: '--menuBg',
            color: '#3e4476'
          },
          {
            name: '--subMenuBg',
            color: '#303666'
          },
          {
            name: '--menuText',
            color: '#fff'
          },
          {
            name: '--subMenuHover',
            color: '#3e4476'
          },
          {
            name: '--menuHover',
            color: '#3e4476'
          },
          {
            name: '--navbarText',
            color: '#fff'
          }
        ]
      }
      this.OptimizeData(themeColors)
    },
    // 优化颜色改变方法
    OptimizeData(themeColors) {
      themeColors.forEach((item) => {
        document
          .getElementsByTagName('body')[0]
          .style.setProperty(item.name, item.color)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.lang_color {
  color: $navbarText;
  line-height: 22px;
}
.lang {
  color: #fff;
  font-size: 20px;
}
.green {
  height: 10px;
  width: 20px;
}
.colors_wrap {
  width: 190px;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  .color_item {
    margin-left: 10px;
    margin-bottom: 10px;
    width: 30px;
    height: 30px;
    background-color: #6e76fa;
    border-radius: 8px;
    border: 1px solid #ccc;
  }
}
</style>
